.title_css_index{
    
    --nav-bar-background-color: none;
    --nav-bar-arrow-color: #fff;
    --nav-bar-text-color: #fff;
    --nav-bar-title-font-size: 18px;
    --nav-bar-title-text-color: #fff;
    --nav-bar-title-font-weight: 400;
}

.content{
     /* 设置为 flex 布局 */
     display: flex;
     /* 设置主轴方向为垂直方向 */
     flex-direction: column;
}

.light {
    /* 设置背景色，添加一定透明度 */
    background-color: rgba(255, 255, 255, 0.268);
    /* 设置毛玻璃模糊效果 */
    backdrop-filter: blur(10px);
    /* 设置边框圆角 */
    border-radius: 10px;
    /* 设置边框 */
    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 

    position: absolute;
    width: 90%; /* 宽度为父元素的100% */;
    height:13%; /* 高度为父元素的100% */;
    /* 水平和垂直方向都居中 */
    // place-items: center;

    // margin-top: 10%;
    // margin-left: 5%
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 6%;
    margin-left: 5%
 }

 .sound_info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.sound_info > View {
  display: flex;
  flex-direction: column;
}

.sound_text {
  font-size: 16px;
  color: #000000;
}

.sound_sub_text {
  font-size: 12px;
  color: #999999;
}

.verticalLayout {
  display: flex;
  flex-direction: column;
}

// ... existing code ...

 .tabBar {
    background-color: rgb(244, 169, 255);
    /* 设置毛玻璃模糊效果 */
    backdrop-filter: blur(10px);
    /* 设置边框圆角 */
    border-radius: 10px;
    /* 设置边框 */
    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 

    display: flex;
    width: 90%;
    margin: 0 auto;
    margin-top: calc(13% + 28%); /* 在 light 组件下方 */
    position: relative;
}

.tabItem {
    flex: 1;
    padding: 10px;
    background: none;
    border: 0px solid #ccc;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: #656262; /* 设置未选中时文字为灰*/
}

.activeTab {
    color: #334542;
}

.slider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% / 3);
    height: 100%;
    background-color: #dddada;
    transition: transform 0.3s ease;
    border-radius: 10px; /* 圆角 */;
}

// ... existing code ...
.newContainer_1 {
    // 可根据需求添加容器样式

        /* 设置背景色，添加一定透明度 */
        background-color: rgba(255, 255, 255, 0.268);
        /* 设置毛玻璃模糊效果 */
        backdrop-filter: blur(10px);
        /* 设置边框圆角 */
        border-radius: 10px;
        /* 设置边框 */
        border: 1px solid rgba(255, 255, 255, 0.18);
    
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    
        position: absolute;
        width: 90%; /* 宽度为父元素的100% */;
        height:40%; /* 高度为父元素的100% */;
        /* 水平和垂直方向都居中 */
        place-items: center;
    
        margin-top: 65%;
        margin-left: 5%
  }

//   .newContainer_2 {
//     // 可根据需求添加容器样式

//         /* 设置背景色，添加一定透明度 */
//         background-color: rgba(255, 255, 255, 0.268);
//         /* 设置毛玻璃模糊效果 */
//         backdrop-filter: blur(10px);
//         /* 设置边框圆角 */
//         border-radius: 10px;
//         /* 设置边框 */
//         border: 1px solid rgba(255, 255, 255, 0.18);
    
//         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    
//         position: absolute;
//         width: 90%; /* 宽度为父元素的100% */;
//         height:30%; /* 高度为父元素的100% */;
//         /* 水平和垂直方向都居中 */
//         place-items: center;
    
//         margin-top: 65%;
//         margin-left: 5%
//   }

// .newContainer_2 {
//     // 可根据需求添加容器样式
//     background-color: rgba(255, 255, 255, 0.268);
//     backdrop-filter: blur(10px);
//     border-radius: 10px;
//     border: 1px solid rgba(255, 255, 255, 0.18);
//     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
//     position: relative;
//     width: 100%;
//     height: 30%;
//     display: flex;  // 设置为 flex 布局
//     flex-direction: column;  // 设置主轴方向为垂直方向
//     place-items: center;
//     // margin-top: 65%;
//     // margin-left: 5%;
//   }

  .newContainer_3 {
    // 可根据需求添加容器样式

        /* 设置背景色，添加一定透明度 */
        background-color: rgba(255, 255, 255, 0.268);
        /* 设置毛玻璃模糊效果 */
        backdrop-filter: blur(10px);
        /* 设置边框圆角 */
        border-radius: 10px;
        /* 设置边框 */
        border: 1px solid rgba(255, 255, 255, 0.18);
    
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    
        position: absolute;
        width: 90%; /* 宽度为父元素的100% */;
        height:40%; /* 高度为父元素的100% */;
        /* 水平和垂直方向都居中 */
        place-items: center;
    
        margin-top: 65%;
        margin-left: 5%
  }

// .Container_clore{
//     position: absolute;
//     width: 90%; /* 宽度为父元素的100% */;
//     height:40%; /* 高度为父元素的100% */;
//     /* 水平和垂直方向都居中 */
//     place-items: center;

//     margin-top: 2%;
//     margin-left: -15%
// }

.Container_clore {
    position: relative;  // 修改为相对定位
    width: 100%;
    height: auto;  // 高度自适应
    display: flex;  // 设置为 flex 布局
    flex-direction: column;  // 设置主轴方向为垂直方向
    place-items: center;
    margin-top: 2%;
    margin-left: 0;  // 重置左边距
  }

  .outerContainer {
    // background-color: rgba(255, 255, 255, 0.268);
    // /* 设置毛玻璃模糊效果 */
    // backdrop-filter: blur(10px);
    // /* 设置边框圆角 */
    // border-radius: 10px;
    // /* 设置边框 */
    // border: 1px solid rgba(255, 255, 255, 0.18);

    // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    width: 90%;
    height: 50%;
    display: flex;
    flex-direction: column;
    position: absolute;
    place-items: center;
    margin-top: 65%;
    margin-left: 5%;
    /* 可按需添加其他样式 */
  }
  

  .light_strong {
    // 可根据需求添加容器样式
    background-color: rgba(255, 255, 255, 0.268);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    width: 100%;
    height: 25%;
    display: flex;  // 设置为 flex 布局
    flex-direction: column;  // 设置主轴方向为垂直方向
    place-items: center;
    margin-top: 45%;
    // margin-left: 5%;
  }


  
.switch {
    position: relative;
    width: 80px; /* 放大开关 */
    height: 35px; /* 放大开关 */
    background-color: #6d6c6c;
    border-radius: 12%;
    transition: background-color 0.4s;
    display: flex;
    align-items: center;
    // padding: 0 12px;/* 修改为单边控制，减少左内边距 */
    // padding: 4 4px;/* 修改为单边控制，减少左内边距 */
    // padding-left: 0px; /* 可根据需求调整该值，让左侧有更少的间距 */
    // padding: 2; /* 移除内边距，让滑块能覆盖到边缘 */
    // margin-top: 35px; /* 上移 10px */
    // margin-left:270px; /* 左移 20px */
    padding: 0;
    margin: 0;
  }
  
  .switchOn {
    background-color: #6c0bffe5; /* 紫色背景 */
  }
  
  .switchLine {
    position: absolute; /* 让竖线脱离文档流 */
    width: 1px;
    height: 15px;
    background-color: rgba(232, 232, 232, 0.792);
    transition: all 0.4s;

    // margin:0 2px;
    // margin: 0; /* 移除外边距 */
  }

  
.switchLine:first-child {
    left: 5px; /* 设置左侧竖线的位置 */
}

/* 为右侧竖线添加额外的右外边距 */
  .switchLine:last-child {
    right: 5px; /* 设置右侧竖线的位置 */
}
  
  .lineShrink {
    transform: scaleY(0); /* 缩小效果 */
    opacity: 0.5;
  }
  
  .lineGrow {
    transform: scaleY(1.5); /* 放大效果 */
    opacity: 1;
  }
  
  .switchSlider {
    width: 25px; /* 方形滑块 */
    height: 25px; /* 方形滑块 */
    background-color: rgba(247, 247, 247, 0.764);
    border-radius: 15%;
    transition: transform 0.4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-left: 5%;
  }
  
//   .sliderOn {
//     transform: translateX(30px); /* 调整滑块移动距离 */
//   }

// 计算滑块移动到最右边的距离,80px 是开关宽度,32px 是滑块宽度,2px 是竖线宽度
.sliderOn {
    // transform: translateX(calc(80px - 30px - 0px - 0px)); 
    transform: translateX(calc(80px - 25px - 2px - 4px));
 
}


// ... existing code ...

.containerForTabs {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.tabContentPage {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

// .newContainer_1,
// .newContainer_2,
// .newContainer_3 {
//   width: 90%;
//   margin-left: 5%;
// }

// ... existing code ...

.tabContainer {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #eee;
}

.tabItem {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  cursor: pointer;
}

.activeTab {
  color: #6c0bffe5;
  border-bottom: 2px solid #6c0bffe5;
}

.newContainer_2 {
  background-color: rgba(255, 255, 255, 0.268);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  width: 100%;
  height: 90%;
  overflow: hidden;
}

.modePage {
  width: 100%;
  white-space: normal;
  box-sizing: border-box;
  padding: 16px;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.showPage {
  /* 显示的页面已经在 JS 中通过 transform 控制位置，这里无需额外设置 */
}

.modeContent {
  /* 可根据需求添加样式 */
  padding: 10px;
}